<template>
	<view style="overflow: hidden;">
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="contentc">
			<uni-password v-show="showPassword" ref="secrity" @confirm="onConfirm1">
				请设置6位支付密码
			</uni-password>
			<view v-show="showPassword" class="" style="font-size: 28rpx;">
				支付密码不能是重复、连续的数字
			</view>

			<uni-password v-show="showRepassword" ref="secrity" @confirm="onConfirm2">
				请再次输入6位支付密码
			</uni-password>
		</view>

	</view>
</template>

<script>
	import uniPassword from '@/components/uni-password/uni-password.vue'
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPassword
		},
		data() {
			return {
				title: '新支付密码',
				code: '',

				showPassword: true,
				showRepassword: false,

				password: '',
				repassword: '',

				showKeyboard: false
			};
		},
		onLoad(option) {
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.code = option.code;
		},

		methods: {
			...mapMutations(['logout']),

			// onInput1(e) {
			// 	console.log(e)
			// },

			// onInput2(e) {
			// 	console.log(e)
			// },
			onConfirm1(e) {
				let password = e.value;
				// console.log(password)
				let fir = password.substr(0, 1);
				let sec = password.substr(1, 1);
				let thi = password.substr(2, 1);
				let fou = password.substr(3, 1);
				let fiv = password.substr(4, 1);
				let six = password.substr(5, 1);

				if (fir == sec == thi == fou == fiv == six) {
					this.$api.msg('支付密码不能是重复的数字')
					return false;
				}

				if (sec - fir == 1 && thi - sec == 1 && fou - thi == 1 && fiv - fou == 1 && six - fiv == 1) {
					this.$api.msg('支付密码不能是连续的数字')
					return false;
				}
				this.password = password;

				this.showPassword = false;
				this.showRepassword = true;
			},

			onConfirm2(e) {
				let repassword = e.value;
				this.repassword = repassword;

				this.submit();

			},

			async submit() {
				if (!this.code) {
					this.$api.msg('非法操作！');
					this.logout();
					uni.setStorageSync('token', '')
					uni.setStorageSync('cate', 0)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 600)
				}
				if (this.repassword !== this.password) {
					this.$api.msg('支付密码和确认支付密码不一致！')
					return false;
				}

				let res = await this.$myRequest({
					url: '/changePwd2',
					data: {
						token: uni.getStorageSync('token'),
						cate: uni.getStorageSync('cate'),
						code: this.code,
						password: this.password
					},
					methods: 'POST'
				})

				this.$api.msg(res.data.msg, 'success');
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/passwords/passwords'
					})
				}, 1500)
			},

		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>

<style lang='scss'>
	.keyboard-container {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
	}

	uni-button[type=primary] {
		background: #00C456 !important;
	}

	/* 选项卡 */
	.tab {
		padding: 0;
	}

	.tab-title {
		white-space: nowrap;
		text-align: center;
		background: #FFFFFF;
	}

	.tab-title view {
		width: auto;
		padding: 0 12px;
		margin: 0 8px;
		line-height: 42px;
		display: inline-block;
		text-align: center;
		border-bottom: 2px solid #FFFFFF;
		font-size: 30upx;
	}

	.tab-title view:first-child {
		margin-left: 0;
	}

	.tab-title view:last-child {
		margin-right: 0;
	}

	.tab-current {
		border-bottom: 4upx solid #00C777 !important;
		color: #00C777;
	}

	.tab-swiper {
		width: 100%;
		height: 350upx;
		padding: 0;
	}

	.tab-swiper swiper-item {
		width: 100%;
	}

	.tab-swiper swiper-item navigator {
		line-height: 70upx;
		width: 100%;
		display: block;
	}

	.tab-swiper-full {
		width: 100%;
		height: auto;
	}

	.tab-swiper-full swiper-item {
		width: 100%;
	}

	.tab-swiper-full scroll-view {
		width: 100%;
		height: 100%;
	}

	.center {
		text-align: center;
	}

	.mt-10 {
		margin-top: 10px;
	}

	.pt-10 {
		paddint-top: 10px;
	}

	.contentc {
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		// #ifdef MP-WEIXIN
		padding-top: 134rpx;
		// #endif

		text-align: center;
		height: auto;
		font-size: $font-base;
	}

	.payment-container {
		border-top: 1px solid #e2e2e2;
		height: calc(100%-44px);
		overflow: hidden;
	}

	.payment-container .payment {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		background: #fff;
	}

	.payment-container .payment view:nth-child(2) {
		flex: 1;
	}

	.payment-container .payment-active {
		background: #E2E2E2;
	}

	.payment-container .payment image {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}

	.money-container {
		background: #fff;
		padding: 10px;
	}

	.money-container .money-box {
		padding: 10px 0;
		border-bottom: 1px solid #efefef;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.money-container .money-box .button {
		font-size: 12px;
		color: #cf9f41;
	}

	.money-container .money-box view:nth-child(1) {
		font-size: 25px;
	}

	.money-container .money-box view:nth-child(2) {
		flex: 1;
		font-size: 30px;
		padding: 0 5px;
	}

	.money-container .tips {
		color: #222;
		padding-top: 10px;
		font-size: 12px;
	}

	.button-box {
		padding: 0 10px;
	}
</style>
